<template>
    <view class="page">
        <view class="top_box">
            <back :isBack="true" :isBg="false" :title="'站点申请'"></back>
        </view>
        <view class="sqk_box">
            <view class="shurukuang_box">
                <input type="text" v-model="name" placeholder-class="lxr_color" placeholder="请输入站点名称">
            </view>
            <view class="dizhi_box" @click="goaddress">
                <view class="text_box" v-if="!address">请选择地址</view>
                <view class="text_box" style="font-weight: 600;color: rgba(0, 0, 0, 1)" v-else>{{ address }}</view>
                <view class="back_icon">
                    <u-icon name="arrow-right" color="rgba(128, 128, 128, 1)" size="28"></u-icon>
                </view>
            </view>
            <!-- <view class="shurukuang_box">
                <input type="text" v-model="address" placeholder-class="lxr_color" placeholder="请输入详细地址">
            </view> -->
            <view class="shurukuang_box">
                <input type="text" v-model="phone" placeholder-class="lxr_color" placeholder="请输入联系方式">
            </view>
            <view class="shurukuang_box">
                <input type="text" v-model="timer" placeholder-class="lxr_color" placeholder="请输入营业时间">
            </view>
            <view class="upload_pic_box">
                <view class="add_pic_box" @click="upLoadimage" v-if="!file">
                    <u-icon name="plus" color="rgba(199, 199, 199, 1)" size="50"></u-icon>
                </view>
                <image @click="delPic" v-else :src="file" mode="scaleToFill" />
            </view>
            <view class="wenan_box">请上传站点照片</view>
            <view class="tijiao_box" @click="$noMultipleClicks(submit)">{{ !redact ? '提交申请' : '确认修改' }}</view>
        </view>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            noClick: true,//防连点
            name: '',
            address: '',
            timer: '',
            file: '',
            imgList: '',
            phone: '',
            filepath: '',
            lat: '',
            lng: '',
            partner_id: '',
            redact: false,//我的站点编辑
            id: '',//修改站点的id
        }
    },
    onLoad(options) {
        // this.address = options.address
        this.name = options.name
        this.file = options.img_url
        // this.lat = options.lat
        // this.lng = options.lng
        this.partner_id = options.partner_id
        this.timer = options.time_period
        this.phone = options.phone
        this.redact = options.redact
        this.id = options.id
    },
    onShow() {
        console.log(this.$store.state.insterPep, "12123123")
        this.address = this.$store.state.insterPep.bigHouse + this.$store.state.insterPep.location
        this.lat = this.$store.state.insterPep.lat
        this.lng = this.$store.state.insterPep.lng
        this.partner_id = JSON.parse(uni.getStorageSync('user')).partner_id
    },
    methods: {
        upLoadimage() {
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], //从相册选择
                success: (res) => {
                    // console.log(res);
                    this.file = res.tempFilePaths[0]

                    var uploadurl = "https://build.lwjcg.com/api/station/upload?token=" + uni.getStorageSync("USERINFO")
                    uni.uploadFile({
                        url: uploadurl,
                        filePath: this.file,
                        name: 'img_url',
                        formData: {
                            'openid': uni.getStorageSync('openId')
                        },
                        success: (res) => {
                            let group = JSON.parse(res.data)
                            uni.showToast({
                                title: "上传成功",
                                icon: "success"
                            })
                            console.log(this.file)
                            this.filepath = group.data
                        }
                    });
                }
            });


        },
        delPic() {
            this.file = ''
        },
        goaddress() {
            uni.navigateTo({
                url: '/userPage/adress/modif?jumps=' + '2' + '&selectSta=' + '1'
            })
        },
        submit() {
            if (!this.name) {
                uni.showToast({
                    title: '请输入站点名称',
                    icon: 'none'
                })
            } else if (!this.address) {
                uni.showToast({
                    title: '请选择地址',
                    icon: 'none'
                })
            } else if (!this.phone) {
                uni.showToast({
                    title: '请输入联系方式',
                    icon: 'none'
                })
            } else if (!this.timer) {
                uni.showToast({
                    title: '请输入营业时间',
                    icon: 'none'
                })
            } else if (!this.file) {
                uni.showToast({
                    title: '请上传站点照片',
                    icon: 'none'
                })
            } else {
                var data = {}
                if (this.redact == false) {
                    data = {
                        name: this.name,
                        img_url: this.filepath,
                        partner_id: this.partner_id,
                        phone: this.phone,
                        address: this.address,
                        lng: this.lng,
                        lat: this.lat,
                        time_period: this.timer,

                    }
                } else {
                    data = {
                        name: this.name,
                        img_url: this.filepath,
                        partner_id: this.partner_id,
                        phone: this.phone,
                        address: this.address,
                        lng: this.lng,
                        lat: this.lat,
                        time_period: this.timer,
                        id: this.id,

                    }
                }

                this.$Request.post(this.$api.user.stationAdd, data).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                        setTimeout(() => {
                            uni.navigateBack({ delta: 1 })
                        }, 600)
                    }

                })
            }
        }
    }
}
</script>
<style lang="scss">
.lxr_color {
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(128, 128, 128, 1);
}

.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(245, 245, 245, 1);
    position: relative;

    .top_box {
        width: 750rpx;
        height: 560rpx;
        background: linear-gradient(180deg, rgba(226, 244, 243, 1) 0%, rgba(226, 244, 243, 0));

    }

    .sqk_box {
        position: absolute;
        left: 0;
        right: 0;
        top: 252rpx;
        margin: auto;
        width: 684rpx;
        border-radius: 22rpx;
        background: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding: 50rpx 26rpx;

        .shurukuang_box {
            width: 632rpx;
            height: 90rpx;
            border-radius: 18rpx;
            box-sizing: border-box;
            padding-left: 18rpx;
            margin: auto;
            background: rgba(247, 247, 247, 1);
            display: flex;
            align-items: center;
            margin-bottom: 56rpx;

            input {
                width: 100%;
                height: 80rpx;
                line-height: 80rpx;
                font-size: 28rpx;
                font-weight: 600;
                line-height: 80rpx;
                color: rgba(0, 0, 0, 1)
            }

        }

        .dizhi_box {
            width: 632rpx;
            height: 90rpx;
            border-radius: 18rpx;
            box-sizing: border-box;
            padding-left: 18rpx;
            margin: auto;
            background: rgba(247, 247, 247, 1);
            margin-bottom: 56rpx;
            line-height: 90rpx;
            position: relative;

            .text_box {
                width: 90%;
                height: 100%;
                color: rgba(128, 128, 128, 1);
                font-size: 28rpx;
                font-weight: 400;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .back_icon {
                position: absolute;
                right: 0;
                width: 50rpx;
                height: 100%;
                line-height: 90rpx;
                top: 0;
            }
        }

        .upload_pic_box {
            width: 260rpx;
            height: 132rpx;
            opacity: 1;
            border-radius: 18rpx;
            background: rgba(240, 240, 240, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 18rpx;

            .add_pic_box {
                width: 50rpx;
                height: 50rpx;
                line-height: 50rpx;
                text-align: center;
            }

            image {
                width: 100%;
                height: 100%;
                border-radius: 18rpx;
            }
        }

        .wenan_box {
            margin-left: 9rpx;
            height: 34rpx;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 34rpx;
            color: rgba(0, 0, 0, 1);
            margin-bottom: 108rpx;
        }

        .tijiao_box {
            width: 616rpx;
            height: 100rpx;
            border-radius: 20rpx;
            background: rgba(26, 194, 121, 1);
            text-align: center;
            line-height: 100rpx;
            margin: auto;
            font-size: 36rpx;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);

        }

    }
}
</style>